<template>
  <span class="message-state">
    <!-- 消息状态组件：
    消息的三种状态：发送中（loading），发送成功，发送失败（小红点）
    megState: 0(成功),1(发送中),2(失败)  ，没有megState,当做是成功 -->
    <span v-if='info.megState === 1' class='loading'></span>
    <span v-if='info.megState === 2' class='fail'>  <i class="tico tico-circle-warning-b" /> </span>

  </span>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: ['info'],
  components: { },
  computed: {
    ...mapState('app', ['chatList', 'roomId', 'chatRoomInfo', 'selectMember', 'groupList', 'friendList'])
  },
  data () {
    return {
      show: {}
    }
  }
}
</script>

<style lang="scss" scoped>
.message-state {
  display: inline-flex;
  align-items: center;
  .loading{
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: 2px solid #999;
  border-bottom-color: transparent;
  -webkit-animation: loading 0.75s linear infinite;
  animation: loading 0.75s linear infinite;
  // 位置相关
  margin: 6px;
  vertical-align: middle;
}
@-webkit-keyframes loading {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(180deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes loading {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(180deg); }
  100% { -webkit-transform: rotate(360deg); }
}
.fail {
  i{
    margin-right: 6px;
    font-size: 22px;
    color: red;
  }
}
}
</style>
